<template>
    <div class="login">
      <div class="loginImg">
        <img src="@/assets/images/logo1.png" alt="">
      </div>
      <!-- 登录 -->
      <el-card class="box-card">
        <div class="clearfix">
          <span>后台管理系统</span>
        </div>
        <p @click="$router.push('/register')">去注册</p>
      <!-- 表单 -->
        <el-form label-position="top" :model="formLabelAlign" :rules="rules" ref="loginform" hide-required-asterisk>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="formLabelAlign.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formLabelAlign.password" placeholder="请输入密码"></el-input>
          </el-form-item>
            <el-button type="primary" class="loginbtn" @click="login">登录</el-button>
        </el-form>
      </el-card>
    </div>
</template>

<script>
import { login } from '@/api/login'
import { mapMutations } from 'vuex'
export default {
  name: 'BigEventLoginUtils',

  props: {
    type: {
      type: String,
      default: 'register'
    }

  },

  data () {
    return {
      // 登录注册公用  登录时type属性为''
      formLabelAlign: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { pattern: /^[\S]{6,12}$/, message: '密码必须6到12位，且不能出现空格', trigger: 'blur' }
        ]
      }
    }
  },

  mounted () {
  },

  methods: {
    ...mapMutations(['setToken']),

    // 登录方法
    async login () {
      await this.$refs.loginform.validate()
      const { data } = await login(this.formLabelAlign)
      if (data && data.code === 0) {
        this.setToken(data.token)
        await this.$refs.loginform.resetFields()
        this.$message.success(data.message)
        this.$router.push('/home')
        return
      }
      this.$message.warning(data.message)
    }
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background: url('~@/assets/images/111.jpg') no-repeat;
  background-size: cover;
  position: relative;
  top: 0;
  left: 0;
}

.box-card {
  width: 45rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 4rem 5rem;

}
.loginImg img {
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 9rem;
  height: 4rem;
}
.clearfix {
  padding-bottom: 1rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
}
/* /deep/.el-form--label-top .el-form-item__label {
  padding: 0;
} */

::v-deep.el-form--label-top .el-form-item__label {
  padding: 0;
}
.loginbtn {
  width: 35rem;
  height: 4rem;
  font-size: 1.17rem;
  border-radius: 0.33rem;
}
::v-deep.el-input {
  width: 35rem;
  height: 3rem;
}
p{
  margin: 0;
  color: #1E5EFF;
  text-align: center;
}
.el-form {
  display: flex;
  flex-direction:column;
  align-items: center;
  padding-top: 2rem;
}
</style>
